<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Google Maps Demo</title> 
<!--Initialize Google Maps API with my API key--> 
<script
	src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAsZnz0FcWblQv-IlMKMLCyxT17Yenz1aIVr__ncDvx7XC4g-EqBQ-qToz-rHyaPkLaUAXyux4-Z6RNA"
	type="text/javascript"></script> 
<meta name="Microsoft Theme" content="none, default">
</head>

<body onunload="GUnload()" background="background.png"> 

<table border="0" cellpadding="0" cellspacing="0" width="898" height="610">
	<!-- MSTableType="layout" -->
	<tr>
		<td valign="top">
		<!-- MSCellType="DecArea" -->
		&nbsp;</td>
		<td valign="top" height="81" colspan="2">
		<!-- MSCellType="ContentHead" -->
		<p align="center"><font size="6" color="#330099">Google Maps 
Demonstration</font></p>
&nbsp;</td>
	</tr>
	<tr>
		<td valign="top" rowspan="3" width="252">
		<!-- MSCellType="NavBody" -->
		&nbsp;<p>&nbsp;</p>
		<p><a href="index.htm">Deployment Results</a></p>
		<p><font face="Trebuchet MS" color="#000000">Google Maps Demo</font></p>
		<p><a href="http://www.cleanair.org">Clean Air Council</a></td>
		<td width="96">&nbsp;</td>
		<td valign="top" height="529" width="647">
		<!-- MSCellType="ContentBody" -->
		<table border=1> 
			<tr> 
				<td> 
				<div id="map" style="width: 550px; height: 450px"></div> 
				</td> 
				<td width=150 valign="top"
					style="text-decoration: underline; color: green;"> 
				<div id="side_bar"></div> 
				</td> 
			</tr> 
			<td colspan=2>Debug
			<div id="debug"></div> 
			</td> 
		</table> 
		<p><a href="http://sites.google.com/site/ece01sd">to Senior
			Design Website</a> <!-- Error for browsers without JavaScript--> 
			<noscript><b>JavaScript must be enabled in order for you
			to use Google Maps.</b> However, it seems JavaScript is either disabled or
			not supported by your browser. To view Google Maps, enable JavaScript by
			changing your browser options, and then try again.</noscript> 
			 
			<!-- Google Maps API code is below--> 
			<script type="text/javascript"> 
			 
			    if (GBrowserIsCompatible()) {
			      
			      // this variable will collect the html which will eventually be placed in the side_bar
			      var side_bar_html = "<b>Click to Place Sensors:</b><br><br>";
			    
			      // arrays to hold copies of the markers and html used by the side_bar
			      // because the function closure trick doesnt work there
			      var gmarkers = [];
			      var gmarkersHTML = [];
			 
			      // maker counter
			      var counter = 1;
			 
			      // A function to create the marker and set up the event window
			      function createMarker(point,name,html,num) {
			    	gmarkersHTML.push(html)
			    	var markerIcon = createIcon(counter);
			        var marker = new GMarker(point, {draggable: true, title: name, icon: markerIcon});
			        GEvent.addListener(marker, "popup", function() {
			          //document.getElementById("debug").innerHTML += gmarkersHTML[num-1]+"<br>";
			          marker.openInfoWindowHtml(gmarkersHTML[num-1]);
			        });
			        // save the info we need to use later for the side_bar
			        gmarkers.push(marker);
			        // add a line to the side_bar html
			        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
			         return marker;
			      }
			 
			      // This function picks up the click and opens the corresponding info window
			      function myclick(i) {
			          GEvent.trigger(gmarkers[i], "popup");
			      }
			 
			   	  // put the assembled side_bar_html contents into the side_bar div
			      function updateSidepanel() {
					document.getElementById("side_bar").innerHTML = side_bar_html;
			      }
			 
			      function createIcon(n) {
			    	  var theIcon = new GIcon(G_DEFAULT_ICON);
			    	  switch(n)
			    	  {
			    	  case 1:
			    		theIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png";
			    	    break;
			    	  case 2:
			    	    theIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/yellowcirclemarker.png";
			    	    break;
			    	  case 3:
			        	theIcon.image = "http://www.pages.drexel.edu/~ko43/ece01sd/redcirclemarker.png";
			            break;
			    	  case 4:
			        	  theIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png";
			        	  break;
			          default:
			    	      theIcon.image = "http://www.pages.drexel.edu/~ko43/ece01sd/redcirclemarker.png";
			    	  }
			    	  return theIcon;
			      }
			 
			      // create the map
			      var map = new GMap2(document.getElementById("map"));
			      map.addControl(new GSmallMapControl());
			      //map.addControl(new GMapTypeControl());
			      map.setCenter(new GLatLng(39.9578, -75.18683), 16);
			 
			      updateSidepanel(); //show html on side panel to start
			 
			      //click on map event listener function
			      GEvent.addListener(map, "click", function(overlay, latlng) {
			    	  if (counter <= 5) {
			    	       if (latlng) {
			        	     var marker = createMarker(latlng,"Sensor #"+counter,"<b>Sensor #"+counter+"</b><br>Sensor Location: "+latlng+"<br>Air Quality (last 24 hours)<br><img src=http://chart.apis.google.com/chart?chs=250x150&chd=t:40,60,60,45,47,75,70,72&cht=lc&chxt=x,y,r&chxl=2:|min|average|max&chxp=2,10,35,75|>",counter);
			        	      //drag a marker event listener function
			        	      GEvent.addListener(marker, "dragstart", function() {
			        	          map.closeInfoWindow();
			        	        });
			 
			        	      GEvent.addListener(marker, "dragend", function(latlng) {
			            	      sensorString = marker.getTitle();
			            	      sensorNum = sensorString.substring(sensorString.length-1);
			            	      gmarkersHTML[sensorNum-1] = "<b>"+sensorString+"</b><br>Sensor Location: "+latlng+"<br>Air Quality (last 24 hours)<br><img src=http://chart.apis.google.com/chart?chs=250x150&chd=t:40,60,60,45,47,75,70,72&cht=lc&chxt=x,y,r&chxl=2:|min|average|max&chxp=2,10,35,75|>";
			            	      marker.openInfoWindowHtml(gmarkersHTML[sensorNum-1]);
			        	        });
			    	         map.addOverlay(marker);
			    	         counter++;
			    	       } else if (overlay instanceof GMarker) {
			      	         //map.removeOverlay(overlay);
			    	         //counter--;
			    	       }
			    	       updateSidepanel();
			    	     } else if (overlay instanceof GMarker) {
			    	         //map.removeOverlay(overlay);
			    	         //counter--;
			    	     } else {
			    	       alert("Cannot place any more nodes.");
			    	     }
			         });
			    }
			    else {
			      alert("Sorry, the Google Maps API is not compatible with this browser");
			    }
			    </script> 
		&nbsp;</td>
	</tr>
</table>

</body>

</html>




 
